// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
console.log('threads', threads)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
// const TerserPlugin = require("terser-webpack-plugin"); //压缩js
module.exports = {
	// 入口 ：相对路径 是相对运行代码的目录
	entry: './src/main.js',
	//   出口：绝对路径
	// webpack2024/dist/main.js
	output: {
		//bug原因：出口路径错误

		// 入口文件打包输出文件名
		filename: 'static/js/[name].js',
		// 文件输出路径 开发模式没有输出,不会形成disk文件
		path: undefined,
		chunkFilename: 'static/js/[name].chunk.js', // // 给打包输出的其他文件命名,name是webpackChunkName或者node_modules中打包文件名

		// 图片、字体等通过type:asset处理资源命名方式
		assetModuleFilename: "static/media/[hash:10][ext][query]",
		// path: path.resolve(__dirname, '../dist'),
		// 自动清空上次打包内容 原理：在打包前，将path整个目录内容清空，再进行打包
		clean: true,
	},
	module: {
		rules: [
			// {
			// 	test: /\.(js|jsx)$/,
			// 	use: 'babel-loader',
			// },
			{
				// 每个文件只能被一个loader处理
				oneOf:
					[	// css-loader将css打包到js中；style-loader创建style标签，添加到html中生效
						{
							test: /\.css$/,
							use: ['style-loader', 'css-loader'],
						},
						{
							test: /\.less$/,
							// loader: 'xxx', // 只能使用1个loader
							use: [
								// compiles Less to CSS
								'style-loader',
								'css-loader',
								'less-loader', // 将less编译成css文件
							],
						},
						{
							test: /\.s[ac]ss$/,
							use: [
								// 将 JS 字符串生成为 style 节点
								'style-loader',
								// 将 CSS 转化成 CommonJS 模块
								'css-loader',
								// 将 Sass 编译成 CSS
								'sass-loader',
							],
						},
						{
							test: /\.styl$/,
							use: [
								// 将 JS 字符串生成为 style 节点
								'style-loader',
								// 将 CSS 转化成 CommonJS 模块
								'css-loader',
								// 将 stylus 编译成 CSS
								'stylus-loader',
							],
						},
						// 搜索inline inlining asset
						{
							test: /\.(png|jpe?g|gif|webp|svg)$/,
							// 文件小于某个大小转化为base64
							type: 'asset',
							parser: {
								dataUrlCondition: {
									// 小于10kb的图片转base64
									// 优点：减少请求数量  缺点：体积会更大
									maxSize: 10 * 1024 // 10kb
								}
							},
							// 形成文件名字
							// ext:文件扩展名 query：携带参数
							//  [hash:10] hash值取前10位
							generator: {
								filename: 'static/images/[hash:10][ext][query]'
							}
						},
						{
							// test: /\.(ttf|woff2?)$/,
							test: /\.(ttf|woff2?|map4|map3|avi)$/,
							// 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现 不压缩
							type: 'asset/resource',
							// generator: {
							// 	filename: 'static/media/[hash:10][ext][query]'
							// }
						},
						{
							test: /\.js$/,
							// exclude: /node_modules/, // 排除node_modules代码不编译
							include: path.resolve(__dirname, "../src"), // 只处理src下的文件，其他文件不处理
							use: [
								{
									loader: "babel-loader",
									// 也可以在babel.config.js中配置
									options: {
										// presets: ['@babel/preset-env']
										cacheDirectory: true, // 开启babel编译缓存
										cacheCompression: false, // 缓存文件不要压缩
										plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
									},
								},
								{
									loader: "thread-loader", // 开启多进程
									options: {
										workers: threads, // 数量
									},
								},
							]

						}]
			}
		],
	},
	plugins: [
		new ESLintPlugin({
			// 检测文件所在的路径 ,绝对路径需要回退一层目录
			context: path.resolve(__dirname, '../src'),
			exclude: "node_modules", // 默认值
			cache: true, // 开启缓存
			// 缓存目录
			cacheLocation: path.resolve(
				__dirname,
				"../node_modules/.cache/.eslintcache"
			),
			threads, // 开启多进程
		}),
		new HtmlWebpackPlugin({
			// 以 public/index.html 为模板创建文件
			// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
			template: path.resolve(__dirname, "../src/public/index.html"),
		}),
	],
	optimization: {
		// 开发模式下不需要压缩
		// 代码分割配置
		splitChunks: {
			chunks: "all",
			// 其他都用默认值
		},
	},
	// // 优化
	// optimization: {
	// 	minimize: true,
	// 	minimizer: [
	// 		// css压缩也可以写到optimization.minimizer里面，效果一样的
	// 		//   new CssMinimizerPlugin(),
	// 		// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
	// 		new TerserPlugin({
	// 			parallel: threads // 开启多进程
	// 		})
	// 	],
	// },
	// 开发服务器  注意这里的版本："webpack-dev-server": "^4.8.1"
	// 开发服务器: 不会输出资源，在内存中编译打包的
	devServer: {
		host: "localhost", // 启动服务器域名
		port: "3000", // 启动服务器端口号
		open: true, // 是否自动打开浏览器
		hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
	},
	mode: 'development',
	devtool: "cheap-module-source-map"
}